<template>
  <section>
    <header class="nav navbar-fixed-top">
      <router-link :to="{name:'cityList'}"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></router-link>
      <span>密码登录</span>
    </header>
    <div class="input-group personInfo">
      <input type="text" placeholder="账号" class="form-control" v-model="userId">
      <input :type="isTrue ? 'password':'text'" class="form-control ps" placeholder="密码" v-model="userps">
      <!--滑块-->
      <span class="switch" @click="change">
        <el-switch
            v-model="value2"
            active-color="#13ce66"
            inactive-color="grey">
        </el-switch>
      </span>


    </div>
    <div class="input-group authCode">
      <div>
        <input type="text" placeholder="验证码" class="imgCode form-control" v-model="imgCode">
        <img :src="img&&img"/>
      </div>
      <div class="changeImg" @click="changeImg">
        <span>看不清</span>
        <span>换一张</span>
      </div>
    </div>
    <span class="cow col-xs-12 p">温馨提示：未注册过的账号，登录时将自动注册</span>
    <span class="cow col-xs-12 p">注册过的用户可凭账号密码登录</span>
    <button class="btn col-xs-11 btn-success enter" @click="login">登录</button>
    <div class="reset cow col-xs-12">
      <router-link :to="{name: 'reset'}" class="pull-right">重置密码?</router-link>
    </div>
    <!--弹出框-->
    <mt-popup v-model="popupVisible" position="center"class="animated bounceIn center-popup" :closeOnClickModal='false' :modal="false">
      <div >
        <i class="iconfont">&#xe604;</i>
        <p class="p">{{content}}</p>
        <button class="btn btn-success" @click="popup">确认</button>
      </div>
    </mt-popup>

  </section>
</template>

<script>
  import Vue from 'vue'
  import animate from 'animate.css'
    export default {
        name: "Login_xsh",
     data(){
          return {
            img:'',//存储验证码照片
            userId:'',//存储用户名
            userps:'', // 存储密码
            imgCode:'',// 存储验证码
            popupVisible:false, // 判断弹框是否显隐
            content:'',//存储弹框里的值
            value1: true,
            value2: true,
            isTrue:true
          }
     },
      created(){
          // 发起请求获取验证码
         this.changeImg();
      },
      methods:{
        changeImg(){
          // 发起请求获取验证码
          const url = "https://elm.cangdu.org/v1/captchas";
          this.$http({
            method: 'post',
            url: url,
            withCredentials: true,
          }).then((res) => {
            // console.log('tap', res);
            this.img = res.data.code
          });
        },
        // 点击登录跳转到城市列表页面 未做逻辑判断
        login() {
          const api = "https://elm.cangdu.org/v2/login";
          this.$http({
            method: 'post',
            url: api,
            withCredentials: true,
            data: {
              captcha_code: this.imgCode,
              password: this.userps,
              username: this.userId
            },
          }).then(res => {
            if (res.data.message) {
              this.popupVisible = true;
              this.content = res.data.message
            }else {
              history.go(-1);
              // 存到vuex
              this.$store.commit('personMassage', res.data);
            }
            console.log(res);
          });
          this.changeImg();
        },
        popup(){
          this.popupVisible = false;
          this.changeImg();
        },
        change(){
          this.isTrue = !this.isTrue
        }
      }
    }
</script>

<style scoped>
section{
  width: 100%;
  height: 100%;
  background-color: rgb(245, 245, 245);
}
.nav{
  width: 100%;
  height: 0.35rem;
  background-color: rgb(50, 143, 254);
  display: flex;
  text-align: center;
  line-height: 0.35rem;
  color: white;
  font-size: 0.16rem;
}
  .nav > a > span{
    color: white;
    margin-left: 0.1rem;
  }
  .nav > span{
    width: 1.5rem;
    margin: 0 auto;
    font-weight: bold;
  }
  .personInfo{
    width: 100%;
    padding-top: 0.45rem;
    border-bottom: 0.01rem solid lightgray;
  }
  .ps{
    width: 88%;
  }
  .switch{
    display: inline-block;
    height: 0.35rem;
    text-align: center;
    line-height: 0.35rem;
    background-color: white;
  }
.personInfo>input{
  border: 0rem solid lightgray;
  }
  .imgCode{
    width: 70%;
    height: 0.35rem;
    border: 0rem solid lightgray;
    background-color: white;
  }
  .authCode{
    display: flex;
    background-color: white;
  }
  .changeImg{
    margin-left: 0.1rem;
    width: 13%;
    font-size: 0.13rem;
  }
  .changeImg>span+span{
    color: rgb(59, 149, 233);
  }
  .p{
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
    color: red;
    font-size: 0.1rem;
  }
  .enter{
    margin-left: 0.15rem;
  }
  .reset{
    margin-top: 0.3rem;
  }
.center-popup{
  position: absolute;
  top: 30%;
  left: 15%;
  text-align: center;
  border-radius: 0.1rem;
  width: 70%;
}
.center-popup p{
  font-size: 0.2rem;
  color: #000;
}
.center-popup button{
  width: 100%;
  font-size: 0.2rem;
  font-weight: 900;
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:1rem;
  font-style:normal;
  color: #F8BB86;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.center-popup{
  position: absolute;
  top: 30%;
  left: 0.25rem;
  text-align: center;
  border-radius: 0.1rem;
  width: 90%;
}
.center-popup p{
  font-size: 0.2rem;
  color: #000;
}
.center-popup button{
  width: 100%;
  font-size: 0.2rem;
  font-weight: 900;
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:1rem;
  font-style:normal;
  color: #F8BB86;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

</style>
